import React, { Component } from 'react';
import { Tag, Dialog, Nav, ConfigProvider } from '@teamix/ui';
import { getCachedRepoValue } from 'utils/repoIdCache';
import track from 'utils/track';
import utils from 'utils';
import Integration from './integration';
import Ide from './ide';
import intl from '../../../../locale';

export default class OpenApi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedKey: props.openDialog ? 'ide' : 'integration',
      visibleFromYundou: props.openDialog,
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.openDialog) {
      return {
        visibleFromYundou: true,
      };
    }
    return {
      visibleFromYundou: false,
    };
  }

  onSelect = (key) => {
    if (key[0] === 'ide') {
      const cacheKey = getCachedRepoValue('user');
      const hasCache = utils.getCachedData(`open-api-ide-${cacheKey}`);
      if (!hasCache) {
        utils.setCachedData(`open-api-ide-${cacheKey}`, '1');
      }
      track({
        action: 'click_IDE_plugin',
        page: 'ecology',
        type: '',
        control: '',
      });
    }
    this.setState({
      selectedKey: key[0],
    });
  };

  openDialog = () => {
    track({
      action: 'click_open_ecology',
      page: 'Ceiling',
      type: '',
      control: '',
    });

    this.setState({
      visible: true,
    });
  };

  openDialogFromYundou = () => {
    this.setState({
      visible: true,
      selectedKey: 'ide',
    });
  };

  onClose = () => {
    if (this.props.openDialog !== undefined) {
      this.props.onClose && this.props.onClose();
      return;
    }
    setTimeout(() => {
      this.setState({
        visible: false,
      });
    }, 0);
  };

  renderDialog = () => {
    const { visible, selectedKey, visibleFromYundou } = this.state;
    const cacheKey = getCachedRepoValue('user');
    const hasIdeCache = utils.getCachedData(`open-api-ide-${cacheKey}`);
    return (
      <Dialog
        title={
          <div style={{ textAlign: 'left' }}>
            {intl.get({
              id: 'code-assets.initHelp.openApi.OpenEcosystem',
              defaultMessage: '开放生态',
            })}
          </div>
        }
        visible={visible || visibleFromYundou}
        onClose={this.onClose}
        onCancel={this.onClose}
        onOk={this.onClose}
        footer={false}
        style={{ width: '920px' }}
        className="open-api-dialog"
      >
        <Nav
          style={{ width: '163px', float: 'left' }}
          onSelect={this.onSelect}
          selectedKeys={[selectedKey]}
        >
          <Nav.Item key="integration">
            {intl.get({
              id: 'code-assets.initHelp.openApi.IntegrationMethod',
              defaultMessage: '集成方式',
            })}
          </Nav.Item>
          <Nav.Item key="ide" className="open-api-ide-nav">
            {intl.get({ id: 'code-assets.initHelp.openApi.IdePlugIn', defaultMessage: 'IDE插件' })}

            {hasIdeCache ? null : (
              <Tag type="primary" style={{ marginLeft: 8 }}>
                NEW
              </Tag>
            )}
          </Nav.Item>
        </Nav>
        <div className="open-api-dialog-content">
          {selectedKey === 'integration' ? <Integration /> : null}
          {selectedKey === 'ide' ? <Ide /> : null}
        </div>
      </Dialog>
    );
  };

  render() {
    const { visible, visibleFromYundou } = this.state;
    if (this.props.openDialog !== undefined) {
      return (
        <ConfigProvider prefix="yx-">{visibleFromYundou && this.renderDialog()}</ConfigProvider>
      );
    }
    return (
      <ConfigProvider prefix="yx-">
        <div className="open-api-help" onClick={this.openDialog}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
            {intl.get({
              id: 'code-assets.initHelp.openApi.OpenEcosystem',
              defaultMessage: '开放生态',
            })}
          </div>
          {visible && this.renderDialog()}
        </div>
      </ConfigProvider>
    );
  }
}
